<template>
    <div class="outBox">
        <el-card>
            <!--搜索框-->
            <div class="searchUser">
                <el-input placeholder="请输入内容" clearable @clear="getUserList" v-model="searchInfo.query" class="input-with-select">
                    <el-button slot="append" style="background-color: #FFc300" @click="getUserList" icon="el-icon-search"></el-button>
                </el-input>
            </div>
            <!--用户表格-->
            <el-table
                    :data="userList"
                    border
                    style="width: 100%;height: 100%"
                    v-loading="isLoading">
                <el-table-column
                        type="index"
                        :index="1" label="#">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="姓别">
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="手机号">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="注册时间">
                </el-table-column>
                <el-table-column label="是否启用">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.enable"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="updateUserState(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            class="yellowBtn"
                            @click="openEditUserDialog(scope.row.uid)"
                            icon="el-icon-edit"></el-button>
                        <el-button
                            type="danger"
                            @click="deleteUser(scope.row.uid)"
                            icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="searchInfo.pagenum"
                    :page-sizes="[10,20,30]"
                    :page-size="searchInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total" >
            </el-pagination>
        </el-card>
        <!--编辑对话框-->
        <el-dialog
                title="编辑用户"
                :visible.sync="eidtUserDialogVisible"
                width="30%">
            <el-form :model="editUser" :rules="editUserRules" ref="editUserRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="editUser.username"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" prop="name">
                    <el-input v-model="editUser.name"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="editUser.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="电话" prop="mobile">
                    <el-input v-model="editUser.mobile"></el-input>
                </el-form-item>
             </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="eidtUserDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserInfo">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "UserManage",
        data(){
            return {
                userList:[],
                total:0,
                searchInfo:{
                    query:'',
                    pagenum:1,
                    pagesize:10,
                },
                editUser:{},
                eidtUserDialogVisible:false,
                editUserRules:{},
                isLoading:true

            }
        },
        methods:{
            //获取用户列表
           async getUserList(){
                this.isLoading=true
                const{data:res}=await this.$http.get("/user/users",{params:this.searchInfo})
                if (res.status!=200)return this.$message.error("查询用户列表失败，请稍后在重试！")
                this.total=res.data.totalpage
                this.userList=res.data.users
                this.isLoading=false
            },
            //尺寸改变时调用
            handleSizeChange(newSize){
               this.searchInfo.pagesize=newSize
               this.getUserList()
            },
            //换页时调用
            handleCurrentChange(newPage){
               this.searchInfo.pagenum=newPage
                this.getUserList()
            },
            //修改用户状态
           async updateUserState(user){
             const {data:res}=await this.$http.put(`/user/user/${user.uid}/state/${user.enable}`)
               if (res.status!=200)return this.$message.error("修改用户状态失败")
               if (user.enable){
                   this.$message.success(user.name+'用户已启用')
               }else {
                   this.$message.error(user.name+'用户已停用')
               }

            },
            //显示编辑窗口
            async openEditUserDialog(uid){
               this.eidtUserDialogVisible=true
              const{data:res}=await this.$http.get('/user/user/'+uid)
                if (res.status!=200)return this.$message.error('查询用户失败')
                this.editUser=res.data
            },
            async editUserInfo(){
              const{data:res}=await this.$http.put("/user/updateUser",this.editUser)
                if (res.status!=200)return this.$message.error("修改用户失败")
                this.$message.success('修改用户成功')
                this.getUserList()
                this.eidtUserDialogVisible=false

            },
            //删除用户
            deleteUser(uid){
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const {data:res}=await this.$http.delete("/user/deleteUser/"+uid)
                    if (res.status!=204)return this.$message.error('删除用户失败')
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getUserList()

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
          //校验权限
          checkRolePower(pid){
            return this.$checkRolePower(pid);
          }

        },created() {
            this.getUserList()
        }
    }
</script>

<style scoped>

    .outBox{
        width: 100%;
        height: 100%;
    }
    .searchUser{
        width: 300px;
        margin-bottom: 15px;
    }
    .el-pagination{
        margin-top: 20px;
    }
    .yellowBtn {
      background-color: #FFc300;
    }
</style>
